<template>
  <div>
    <div class="hmm">
      <el-row>
        <el-col :span="8" v-for="(item, index) in listarr" :key="index">
          <div class="hm">
            <div class="hm_one"><img :src="item.img" /></div>
            <div class="hm_two">
              <div>{{ item.name }}</div>
              <div>{{ item.price }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="hhH">
      <h4>待处理事务</h4>
      <el-row>
        <el-col :span="8" v-for="(item, index) in homelist" :key="index">
          <div class="hh">
            <div class="hh_one">
              <div class="hh_two">
                <div>{{ item.name1 }}</div>
                <div class="hh_two_one">{{ item.num }}</div>
              </div>
              <div class="hh_three">
                <div>{{ item.name2 }}</div>
                <div class="hh_three_one">{{ item.num1 }}</div>
              </div>
              <div class="hh_four">
                <div>{{ item.name3 }}</div>
                <div class="hh_four_one">{{ item.num2 }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="ccc">
      <el-row>
        <el-col :span="12" v-for="(item, index) in list" :key="index">
          <div class="cc">
            <h4>{{ item.name }}</h4>
            <div class="cc_one">
              <div class="cc_two">
                <p class="cc_six">{{ item.num }}</p>
                <p>{{ item.name1 }}</p>
              </div>
              <div class="cc_three">
                <p class="cc_six">{{ item.num1 }}</p>
                <p>{{ item.name2 }}</p>
              </div>
              <div class="cc_four">
                <p class="cc_six">{{ item.num2 }}</p>
                <p>{{ item.name3 }}</p>
              </div>
              <div class="cc_five">
                <p class="cc_six">{{ item.num3 }}</p>
                <p>{{ item.name4 }}</p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="fff">
      <h4>订单统计</h4>
      <div class="test">
        <el-card class="box-card">
          <div v-for="(item, index) in mmlist" :key="index">
            <div class="ff_one_one">{{ item.name }}</div>
            <div class="ff_one_two">{{ item.num }}</div>
            <div class="ff_one_three">
              <div class="hl" :style="item.text ? 'color:red;' : 'color:blue;'">
                {{item.num1}}
              </div>
              <div class="ff_one_four">{{item.name1}}</div>
            </div>
          </div>
        </el-card>
        <el-col :span="16"><div class="grid-contxent bg-purple-light">
          <div class="tb"> 
          <!-- 显示图表 -->
          <div id="mychart" class="mychart"></div>
          <div id="mychartr" class="mychartr"></div>
        </div>
          </div></el-col>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "home",
  data: function () {
    return {
      listarr: [
        {
          id: 1,
          name: "今日订单总数200",
          price: "200",
          //在 js里面获取 vue项目的本地图片 ，需要使用  require
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 2,
          name: "今日销售总额",
          price: "￥5000",
          img: require("@/assets/images/home_today_amount.png"),
        },
        {
          id: 3,
          name: "昨日销售总额",
          price: "￥3000",
          img: require("@/assets/images/home_yesterday_amount.png"),
        },
      ],
      homelist: [
        {
          id: 1,
          num: "(10)",
          num1: "(30)",
          num2: "(12)",
          name1: "代付款订单",
          name2: "代发货订单",
          name3: "已发货订单",
        },
        {
          id: 2,
          num: "(5)",
          num1: "(6)",
          num2: "(9)",
          name1: "已完成订单",
          name2: "新缺货登记",
          name3: "待处理退货订单",
        },
        {
          id: 3,
          num: "(20)",
          num1: "(8)",
          num2: "(10)",
          name1: "待确认收货订单",
          name2: "待处理退款申请",
          name3: "广告位即将到期",
        },
      ],
      list: [
        {
          id: 1,
          num: "100",
          num1: "400",
          num2: "50",
          num3: "500",
          name: "商品总览",
          name1: "已下架",
          name2: "已上架",
          name3: "库存紧张",
          name4: "全部商品",
        },
        {
          id: 2,
          num: "100",
          num1: "200",
          num2: "1000",
          num3: "5000",
          name: "用户总览",
          name1: "今日新增",
          name2: "昨日新增",
          name3: "本月新增",
          name4: "会员总数",
        },
      ],
      mmlist: [
        {
          id: 1,
          name: "本月订单统计",
          num: "10000",
          num1: "+10%",
          name1: "同比上月",
          text: 1,
        },
        {
          id: 2,
          name: "本周订单总数",
          num: "1000",
          num1: "-10%",
          name1: "同比上周",
          text: 0,
        },
        {
          id: 3,
          name: "本月销售总额",
          num: "100000",
          num1: "+10%",
          name1: "同比上月",
          text: 1,
        },
        {
          id: 4,
          name: "本周销售总额",
          num: "50000",
          num1: "-10%",
          name1: "同比上周",
          text: 0,
        },
      ],
      option: {
        //图表数据
        //x轴数据
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        //y轴
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [400, 200, 150, 80, 70, 110, 200],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      },
      option1: {
        title: {
          text: "漏斗图",
          subtext: "纯属虚构",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        legend: {
          data: ["展现", "点击", "访问", "咨询", "订单"],
        },

        series: [
          {
            name: "漏斗图",
            type: "funnel",
            left: "10%",
            top: 60,
            //x2: 80,
            bottom: 60,
            width: "80%",
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              position: "inside",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [
              { value: 60, name: "访问" },
              { value: 40, name: "咨询" },
              { value: 20, name: "订单" },
              { value: 80, name: "点击" },
              { value: 100, name: "展现" },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    //调用 画图表的函数
    this.drawLine();
  },
  methods: {
    drawLine() {
      //1.初始化
      let mycharts = this.$echarts.init(document.getElementById("mychart"));
      let mychartsr = this.$echarts.init(document.getElementById("mychartr"));
      //2.绘制
      mycharts.setOption(this.option);
      mychartsr.setOption(this.option1);
    },
  },
};
</script>

<style lang="scss">
.hmm {
  margin: 10px;
  .hm {
    display: flex;
    border: 1px solid #ccc;
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    .hm_one > img {
      width: 50px;
      height: 50px;
    }
    .hm_two {
      padding-left: 10px;
    }
  }
}
.hhH {
  margin: 10px;
  border: 1px solid #ccc;
  h4 {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
    padding-left: 10px;
    background: rgba(204, 204, 204, 0.253);
  }
  .hh_one {
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 30px;
    .hh_two {
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      .hh_two_one {
        color: red;
      }
    }
    .hh_three {
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      .hh_three_one {
        color: red;
      }
    }
    .hh_four {
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      .hh_four_one {
        color: red;
      }
    }
  }
}
.ccc {
  margin: 10px;
  width: 100%;
  height: 100px;
  border: 1px solid #ccc;
  h4 {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
    padding-left: 10px;
    background: rgba(204, 204, 204, 0.253);
  }
  .cc_one {
    display: flex;
    justify-content: space-around;
    height: 50px;
    line-height: 30px;
    .cc_two {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cc_three {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cc_four {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cc_five {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cc_six {
      color: red;
    }
  }
}
.fff {
  h4 {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
    padding-left: 10px;
    background: rgba(204, 204, 204, 0.253);
  }
  .test {
    display: flex;
  }
}
.el-card{
  width: 40%;
}
.mychart {
  width: 500px;
  height: 500px;
}
.mychartr {
  width: 500px;
  height: 500px;
}
// .tb {
//   display: flex;
// }
.ff_one_two{
  padding-top: 10px;
}
.ff_one_three{
   padding-top: 10px;
   display: flex;
}
.ff_one_four{
  padding-left: 5px;
  padding-bottom:30px;
}

</style>